<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8"/>
     <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>


<body>

<form>
    <input type="text" name="username" placeholder="请输入用户名"/>
    <input type="password" name="password"/>
    <input type="text" name="telePhone" id="telePhone" placeholder="请输入手机号"/>
    <input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" />   <br><br><br>

    <input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" />  <br><br><br>
    <input type="button" value="注册">
</form>



<script type="text/javascript">
    var countdown=60;
    function settime(obj) {
        if (countdown == 0) {
            obj.removeAttribute("disabled");
            obj.value="免费获取验证码";
            countdown = 60;
            return;
        } else {
            obj.setAttribute("disabled", true);
            obj.value="重新发送(" + countdown + ")";
            countdown--;
        }
        setTimeout(function() {
                settime(obj) }
            ,1000)
    }


    var InterValObj; //timer变量，控制时间
    var count = 60; //间隔函数，1秒执行
    var curCount;//当前剩余秒数

    function sendMessage() {
        curCount = count;
        //设置button效果，开始计时
        $("#btnSendCode").attr("disabled", "true");
        $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
        //向后台发送处理数据
        $.ajax({
            type: "POST", //用POST方式传输
            dataType: "json", //数据格式:JSON
            url: 'reguser.do', //目标地址
            data: {
               telPhone:$("#telePhone").val(),
            },
            success: function (msg){
                console.log(msg)
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) { },
        });
    }

    //timer处理函数
    function SetRemainTime() {
        if (curCount == 0) {
            window.clearInterval(InterValObj);//停止计时器
            $("#btnSendCode").removeAttr("disabled");//启用按钮
            $("#btnSendCode").val("重新发送验证码");
        }
        else {
            curCount--;
            $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
        }
    }

</script>
</body>
</html>
